<template>
  <div class="container">
    <div class="inner clearfix">
      <div v-if="leftMenuVisible" class="content-left fl">
        <el-menu :style="'margin-top: 10px;height:' + leftMenuHeight + 'px;overflow-y: auto;'" :default-active="currentMenu" @select="onLeftMenuNavSelect">
          <template v-for="menu in leftMenuNavList">
            <template v-if="menu.list">
              <el-submenu :index="menu.name">
                <template slot="title"><i :class="menu.icon"></i>{{menu.title}}</template>
                <template v-for="sub in menu.list">
                  <el-menu-item :index="sub.name"><i :class="sub.icon"></i>{{sub.title}}</el-menu-item>
                </template>
              </el-submenu>
            </template>
            <template v-else>
              <el-menu-item :index="menu.name"><i :class="menu.icon"></i>{{menu.title}}</el-menu-item>
            </template>
          </template>
        </el-menu>
      </div>
      <!-- end content-left -->

      <div class="content-right" :style="'min-height:' + contentRightHeight + 'px' ">
        <!--<h1 class="content-right-title">{{pageTitle}}</h1>-->
        <!--<slot></slot>-->
        <el-tabs type="card" closable v-model="tabsModel" @tab-remove="closeTab">
          <el-tab-pane
            v-for="(item, index) in multiPageNavList"
            :key="item.name"
            :label="item.title"
            :name="item.name">
            <component v-bind:is="item.content"></component>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- end content-right -->

      <a v-if="leftMenuVisible" href="javascript:;" class="btn-leftMenuFold" @click="setLeftMenuVisible"></a>
      <a v-else href="javascript:;" class="btn-leftMenuFold" style="left: 5px" @click="setLeftMenuVisible"></a>
    </div>
  </div>
</template>
<script>
  import {Event, LEFT_MENU_NAV_LIST} from '@/config'
  import FormDemo from '@/pages/list/FormDemo.vue'
  export default {
    props: {
      currentMenu: ''
    },
    components: {
      FormDemo
    },
    data () {
      return {
        leftMenuNavList: LEFT_MENU_NAV_LIST,
        leftMenuHeight: 0,
        contentRightHeight: 0,
        leftMenuVisible: true,
        multiPageNavList: [],
        tabsModel: ''
      }
    },
    mounted () {
      this.leftMenuHeight = document.documentElement.clientHeight - 160
      this.contentRightHeight = document.documentElement.clientHeight - 160
      let that = this
      Event.$on('openMenu', function (menu) {
        let that2 = that
        let opened = false
        that.multiPageNavList.forEach(function (item) {
          if (item.name === menu.name) {
            that2.tabsModel = item.name
            opened = true
            return
          }
        })
        if (!opened) {
          that.multiPageNavList.push({
            title: menu.title,
            name: menu.name,
            content: menu.content
          })
          that.tabsModel = menu.name
        }
      })
      Event.$on('closeMenu', function () {
        that.closeTab(that.tabsModel)
      })
    },
    computed: {
      pageTitle () {
        let s = this.currentMenu
        if (s === 'headerNav.' + this.currentMenu) {
          s = this.currentMenu
        }
        return s
      }
    },
    methods: {
      closeTab (name) {
        let that = this
        let currentIdnex = -1
        this.multiPageNavList.forEach(function (tab, index) {
          if (tab.name === name) {
            currentIdnex = index
            return
          } else {
            that.tabsModel = tab.name
          }
        })
        if (currentIdnex !== -1) {
          this.multiPageNavList.splice(currentIdnex, 1)
        }
      },
      setLeftMenuVisible () {
        this.leftMenuVisible = !this.leftMenuVisible
      },
      onLeftMenuNavSelect (key, keyPath) {
        let that = this
        let opened = false
        this.multiPageNavList.forEach(function (tab) {
          if (tab.name === key) {
            that.tabsModel = tab.name
            opened = true
            return
          }
        })
        if (opened) {
          return
        }
        this.leftMenuNavList.forEach(function (item) {
          if (item.name === key) {
            that.multiPageNavList.push({
              title: item.title,
              name: item.name,
              content: item.component
            })
            that.tabsModel = item.name
//            go(item.href)
            return
          }
          if (item.list) {
            item.list.forEach(function (sub) {
              if (sub.name === key) {
                that.multiPageNavList.push({
                  title: sub.title,
                  name: sub.name,
                  content: sub.component
                })
                that.tabsModel = sub.name
//                go(sub.href)
                return
              }
            })
          }
        })
      }
    }
  }
</script>
<style>
  .el-submenu, .el-menu {
    background-color:  rgba(0, 0, 0, 0) !important;
  }
  body {
    background-color: #E7E8EB;
  }
  .container {
    padding-top: 20px;
    min-width: 1270px;
    /*width: 99%*/
  }
  .inner {
    margin: 0 auto;
  }
  .container .inner {
    position: relative;
    background: #fff;
    border: 1px solid #e2e2e2
  }
  .clearfix:after {
    display: block;
    content: " ";
    height: 0;
    visibility: hidden;
    clear: both
  }
  .fl {
    float: left
  }
  .content-left {
    padding-top: 10px;
    width: 250px;
  }
  .content-right {
    padding: 20px;
    overflow: hidden;
    border-left: 1px solid #e2e2e2;
  }
  .content-right-title {
    font-size: 14px;
    padding-bottom: 20px
  }
  .btn-leftMenuFold {
    position: absolute;
    left: 230px;
    top: 5px;
    width: 20px;
    height: 20px;
    background: url() center no-repeat;
    z-index: 1
  }
</style>
